<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" class="main-search">
      <el-form-item label="客户姓名" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入客户姓名" clearable @keyup.enter.native="handleQuery"
                  style="width: 160px"/>
      </el-form-item>
      <el-form-item label="客户电话" prop="mobile">
        <el-input v-model="queryParams.mobile" placeholder="请输入客户电话" clearable @keyup.enter.native="handleQuery"
                  style="width: 160px"/>
      </el-form-item>
      <el-form-item label="批次号" prop="batchLogo">
        <el-input v-model="queryParams.batchLogo" placeholder="请输入批次号" clearable @keyup.enter.native="handleQuery"
                  style="width: 160px"/>
      </el-form-item>
<!--      <el-form-item label="状态" prop="status">-->
<!--        <el-input v-model="queryParams.status" placeholder="请输入状态" clearable @keyup.enter.native="handleQuery"-->
<!--                  style="width: 160px"/>-->
<!--      </el-form-item>-->
      <el-form-item label="星级" prop="level">
        <el-select v-model="queryParams.level" placeholder="请选择星级" clearable style="width: 160px">
          <el-option v-for="dict in dict.type.level_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="来源" prop="source">
        <el-input v-model="queryParams.source" placeholder="请输入来源" clearable @keyup.enter.native="handleQuery"
                  style="width: 160px"/>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="queryParams.remark" placeholder="请输入备注" clearable @keyup.enter.native="handleQuery"
                  style="width: 160px"/>
      </el-form-item>

      <el-form-item label="录入时间" prop="time">
        <el-date-picker
          v-model="time"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          :clearable="true"
          range-separator="至"
          :editable="false"
          placeholder="请选择开始时间">
        </el-date-picker>
        <!--          @change="changeDate"-->
      </el-form-item>
      <el-form-item label="客户状态" prop="flag" v-if="currentType == '1'">
        <el-select v-model="queryParams.flag" placeholder="-不限-" clearable style="width: 160px">
          <el-option
            v-for="dict in dict.type.total_customer_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否删除" prop="delFlag">
        <el-select v-model="queryParams.delFlag" placeholder="-不限-" clearable style="width: 160px">
          <el-option label="未删除" value="0"></el-option>
          <el-option label="已删除" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="渠道API" prop="channelIds">
        <el-select v-model="queryParams.channelIds" placeholder="-不限-" clearable style="width: 160px">
          <el-option
            v-for="dict in this.channelDataList"
            :key="dict.id + ''"
            :label="dict.channelName"
            :value="dict.id + ''"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          @click="handlePull"
          v-hasPermi="['total:customer:transformerCustomer']"
          v-if="currentType == '1'"
        >导入公司公海
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          @click="oneKeyIssue"
          v-hasPermi="['total:customer:oneKeyIssue']"
          v-if="currentType == '1'"
        >一键下发
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          @click="oneKeyIssue"
          v-hasPermi="['total:customer:oneKeyIssue_dxf']"
          v-if="currentType == '2'"
        >一键下发
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="customerList" @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" width="55" :selectable="isOk" align="center"/>
      <el-table-column label="ID" align="center" prop="id" v-if="false"/>
      <el-table-column label="姓名" align="center" prop="name" width="100px" fixed="left"/>
      <el-table-column label="电话" align="center" prop="mobile" width="110px" fixed="left"/>
      <el-table-column label="星级" align="center" prop="level" width="100px" fixed="left">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.level_type" :value="scope.row.level"/>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="customerStatus" width="100px" fixed="left">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.customer_status" :value="scope.row.customerStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="来源" align="center" prop="source" width="100px"></el-table-column>
      <el-table-column label="客户状态" align="center" prop="customerFlag" width="100px">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.total_customer_type" :value="scope.row.customerFlag"/>
        </template>
      </el-table-column>
<!--      <el-table-column label="客户成熟度" align="center" prop="customerMaturity" width="100px"/>-->
<!--      <el-table-column label="客户类别" align="center" prop="customerType" width="100px"/>-->
      <el-table-column label="性别" align="center" prop="sex"></el-table-column>
      <el-table-column label="备注" align="center" prop="remark" width="400px">
        <template slot-scope="scope">
          <div class="messageCard" v-html="scope.row.remark">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="批次" prop="batchLogo"></el-table-column>
      <el-table-column label="录入时间" align="center" width="180px" prop="createTime"/>
      <el-table-column label="退回原因" align="center" width="180px" prop="returnMsg"/>
      <el-table-column label="是否删除" align="center">
        <template slot-scope="scope">
          {{ scope.row.delFlag == '0' ? '未删除' : '已删除' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" v-if="currentType=='1'">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.delFlag==0"
            size="mini"
            type="text"
            icon="el-icon-delete"
            v-hasPermi="['total:customer:delCustomer']"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 分配客户信息 -->
    <bath-dis-customer ref="bathDisCustomer"></bath-dis-customer>
  </div>
</template>

<script>
import {listCustomer, transformerCustomer, delCustomer} from "@/api/customer/totalCustomer";
import BathDisCustomer from '../components/BathDisCustomer.vue'
import {getDeptList, getUserList} from "@/api/customerPool/customerPool";
import {noListChannelDataConf} from "@/api/channel/channelDataConf";

export default {
  name: "Customer",
  components: {
    BathDisCustomer,
  },
  dicts: ['total_customer_type', 'level_type', 'customer_status'],
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      time: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 客户信息表格数据
      customerList: [],
      // 用户信息数据
      userList: [],
      // 部门信息数据
      deptList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        name: undefined,
        mobile: undefined,
        status: undefined,
        source: undefined,
        remark: undefined,
        startTime: undefined, // 自定义开始时间
        endTime: undefined, // 自定义结束时间
        currentType: this.currentType,
        flag: undefined,
        delFlag: undefined,
        batchLogo: '',
        level: undefined,
        channelIds: undefined,
      },

      // 明细信息
      mxOpen: false,
      mxForm: {},

      // 上一页 下一页实现
      operList: [], //  全量id  [{id:'1'},{id:'2'}] 这种形式
      index: 0, // 当前页面下标
      pageId: '', // 当前页面id

      // 表单参数
      form: {},

      // 当前页面操作类型
      currentType: '',

      channelDataList: [],

    };
  },
  created() {
    // this.queryParams.flag = this.$route.query.flag
    // 获取路由信息
    this.currentType = this.$route.query.currentType;
    console.log("currentType：" + this.currentType)
    this.getList();
    this.getChannelDataList();
  },
  methods: {
    // 获取渠道数据信息
    getChannelDataList() {
      noListChannelDataConf().then(res=> {
        this.channelDataList = res.data;
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('此条数据吗?').then(() => {
        this.loading = true;
        return delCustomer(ids);
      }).then(() => {
        this.loading = false;
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).finally(() => {
        this.loading = false;
      });
    },
    // changeDate(e) {
    //   if (e) {
    //     this.queryParams.startTime = e[0]
    //     this.queryParams.endTime = e[1]
    //   } else {
    //     this.queryParams.startTime = ''
    //     this.queryParams.endTime = ''
    //   }
    //   console.log('e', this.queryParams)
    // },
    isOk(row) {
      // row.customerFlag != '1' 一键下发 公司池也可以操作
      return row.delFlag == '0'
    },
    /** 查询客户信息列表 */
    getList() {
      this.loading = true;
      this.queryParams.currentType = this.currentType;
      listCustomer(this.queryParams).then(response => {
        this.customerList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        name: undefined,
        mobile: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      // 合同时间
      if (this.time && this.time.length) {
        this.queryParams.startTime = this.time[0]
        this.queryParams.endTime = this.time[1]
      } else {
        this.queryParams.startTime = null
        this.queryParams.endTime = null
      }
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.time = []
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    /** 退回： 1、批量退回  3、修改页面退回**/
    handlePull() {
      if (this.ids.length == 0) {
        this.$modal.msgError("请选择用户！");
        return;
      }
      if (this.ids.length > 100) {
        this.$modal.msgError("最多传递100个");
        return;
      }
      transformerCustomer(this.ids).then(res => {
        console.log(res)
        this.$modal.msgSuccess("操作成功!");
        this.getList()
      })
    },

    oneKeyIssue() {
      if (this.ids.length == 0) {
        this.$modal.msgError("请选择用户！");
        return;
      }
      const ids = this.ids
      const customers = [];
      ids.forEach(it => {
        const obj = this.customerList.find(item => item.id == it);
        const data = {
          tel: obj.mobile,
          id: obj.id,
          name: obj.name
        }
        customers.push(data);
      })
      // 跳转分配
      this.$refs.bathDisCustomer.openDialog(customers, 'totalCustomer');
    },

    /** 获取用户信息 */
    getUserInfoList() {
      const query = {
        type: "1"
      }
      getUserList(query).then(response => {
        this.userList = response.data;
      })
    },
    getDeptInfoList() {
      const query = {
        type: "1"
      }
      getDeptList(query).then(response => {
        this.deptList = response.data;
      })
    },

  },
}
</script>
<style scoped>
.messageCard {
  overflow-x: hidden;
  overflow-y: scroll;
  word-break: break-all;
  width: 400px;
  max-height: 100px;
  text-align: left;
  float: left;
  text-align: left;
  text-overflow: ellipsis;
  color: #313131;
}

.messageCard::-webkit-scrollbar {
  width: 4px;
}

.messageCard::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}

.messageCard::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>
<style type="text/css">
.el-dialog__body {
  padding: 5px 20px 30px 20px;
}

.el-form-item {
  margin-bottom: 8px;
}

.el-form-item--small.el-form-item {
  margin-bottom: 8px;
}

.el-timeline-item {
  padding-bottom: 1px;
}

</style>
